<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式：diaplay</title>
</head>
<style>
    h1,h2,h3,h4,h5,h6 {color:brown;}
    p {text-indent: 2em;}
    .inline {color:brown;
        margin: 30px;
        padding:30px;
        font-size: 3em;
        border:1px solid brown;
       }
    .inline-block {
        display: inline-block;
        text-indent: 0em;
        width:80px;
        height:80px;
        margin: 10px;
        padding: 10px;
        border: 1px solid brown;
    }
    div {
        margin: 10px;
        padding:10px;
        text-align: center;
    }
</style>
<body>
   <h2 style="background-color:lightblue;padding:20px;color:brown;text-align:center;">display属性基础</h2>
   <h3>inline</h3>
   <p>display属性的值，常用的有：none、inline、block、inline-block等。</p> 
   <p>每一个html元素都可以看成一个盒子，每个盒子都有上下左右的外边距、边框和内边距；然后内容还有宽度和高度。
       那么这些盒子如何放到一起，形成一个版面呢？让我们从最严格的情况开始了解。
   </p>
   <p>inline: 行内元素，或者叫内联元素，很简单，它就是作为一行的一个元素，不会换行，假设一行排满了，它就自动
       显示到下一行，但并不会产生一个换行符。这里有个强调标签：<em class="inline">我是一个em标签</em>。
       他就是紧紧跟在前面的内容后面。特点如下：
   </p>
   <ul>
       <li>浏览器自动计算宽高，设置无效。你可以想象为是一个产品的盒子，总是收缩到最小；</li>
       <li>水平方向可以设置margin和padding，如前所示。就好比你在多层停车场排队停车，可以前后根据情况留点距离；</li>
       <li>垂直方向上margin和padding无效。是的，多层停车场，你不能要求楼板的高度；</li>
       <li>如果内容本身太大，浏览器会自动排版，如前所示；</li>
       <li>border仍然会考虑width、height、padding正确绘制，但是可能得到内容相互覆盖的结果。</li>
   </ul>
   <h3>inline-block</h3>
   <p>inline-block比inline要自由一些，你可以自由地设置width、height、margin、border、和padding。
       <span class="inline-block">我是一个inline-block</span>。而这个inline-box后面的内容，仍然在一行上。
   </p>
   <ul>
       <li>在行内排列，挤不下就紧跟到下一行，不产生换行符；</li>
       <li>可以自由设置width、height、margin、padding、border。</li>
   </ul>
   <h3>block</h3>
   <p>block是块元素，默认情况下它就像倒入杯子的水，总是占满杯子的宽度，相当于占满一行，而高度根据自身的水（内容）的多少而不同。
       因此：
   </p>
   <ul>
       <li>默认是它的父元素的宽度，也就相当于默认要占满一行；</li>
       <li>高度自动计算，取决于内容；</li>
       <li>因为要占满一行，所以会产生换行符。</li>
       <li>可以自由设置margin、border、padding、width和height</li>
       <li><em style="font-size:1em; border:none;margin:auto;padding:0;">即使总宽度小于
    一行，也要独占一行！</em></li>
   </ul>
   <div style="background-color:rgba(255, 0, 0, 0.5); width:33%">div1</div>
   <div style="background-color: rgba(0, 128, 0, 0.5); width:66%">div2</div>
   <div style="background-color: rgba(0, 0, 255, 0.5);">div3</div>
   <p>您看，block总是很贪婪，无论它多宽，它总是要“霸占”一行。</p>
   <h3>问题</h3>
   <ul>
       <li>盒子问题：对于block和inline-block，它们是真正的盒子，总是保持显示
           为一个矩形，如果放不下，它们就整体地跑到下一行，总之绝不分割。<br>
           但是对于inline, 它是真正地按行显示，如果放不下，可以分到多行显示。
           你可以调整视口，直到上面的em标签框被分到多行。
       </li>
       <li>对齐问题：对于按行排列的情况，可以想象一条行线（基线：baseline），默认排列时，都沿着
           这个基线对齐。对于inline-block，则是最后的一行文字与基线对齐。
           <p>也许你需要不同的对齐方式，这里em的 vertical-align用了top：<em class="inline" style="vertical-align: top;">em标签</em>，
            这里，设置了display：inline-block属性的span用了vertical-align用了top：<span class="inline-block" style="vertical-align:top;">我是一个inline-block</span>, 
            <br>当然，如果你想要上标和下标，也可用vertical-align这个属性：<br>
            H<span style="vertical-align:sub;">2</span>O<br>
            ax<span style="vertical-align:super;">2</span>+bx+c=0
        </p>
       </li>
   </ul>
</body>
</html>